<template>
    <div>
        <el-breadcrumb style="font-size: 16px;"
                       separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">
                <i class="el-icon-s-promotion"></i>后台管理
            </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/sys-admin/product/order'}">订单管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>添加订单</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品类别" prop="categoryId">
              <el-cascader
                  style="width: 100%;"
                  placeholder="请选择父级类别"
                  v-model="ruleForm.categoryId"
                  :options="categoryOptions"
                  @change="loadSpuListByCategoryId">
              </el-cascader>
            </el-form-item>
            <el-form-item label="SPU" prop="spuId">
              <el-select v-model="ruleForm.spuId" placeholder="请选择SPU" @change="loadSkuListSpuId">
                <el-option
                    v-for="item in SPUList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="SKU" prop="skuId">
              <el-select v-model="ruleForm.skuId" placeholder="请选择SKU" @change="loadSkuId">
                <el-option
                    v-for="item in SKUList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="购买数量" prop="number">
                <el-input v-model="ruleForm.number"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
                <el-input v-model="ruleForm.price"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button type="warning" @click="$router.push('/sys-admin/product/order')">返回列表</el-button>

            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ICategoryId:null,
                categoryOptions:[],
                albumListOptions:[],
                SPUList:[],
                SKUList:[],
                ruleForm: {
                    number: null,
                    //price: 300.0,
                    categoryId:null,
                    price:null,
                    spuId:null,
                    skuId:null,
                },
                rules: {
                    number: [
                        { required: true, message: '请输入数量', trigger: 'blur' },
                    ],
                    // price: [
                    //     { required: true, message: '请输入简介', trigger: 'blur' }
                    // ],
                }
            };
        },
        methods: {
          // 加载本地存储的表单数据
          // loadLocalRuleForm() {
          //   let localRuleFormString = localStorage.getItem('localRuleForm');
          //   let localRuleForm = JSON.parse(localRuleFormString);
          //   if (localRuleForm && localRuleForm.categoryId) {
          //     this.ruleForm = localRuleForm;
          //   }
          // },
          loadSkuId(skuId){
            if (skuId){
              console.log("********"+skuId);
              this.ruleForm.skuId = skuId;
            }
          },
          submitForm(formName) {
            console.log(this.ruleForm.categoryId);
            if (Array.isArray(this.ruleForm.categoryId)) {
              this.ruleForm.categoryId = this.ruleForm.categoryId.pop();
            }
            this.$refs[formName].validate((valid) => {
              if (valid) {
                let url = 'http://localhost:9080/order/add-new'
                console.log('url = ' + url);

                // let formData = 'name=' + this.ruleForm.name
                //     + '&description=' + this.ruleForm.description
                //     + '&sort=' +
                let formData = this.qs.stringify(this.ruleForm, {'arrayFormat': 'repeat'});
                console.log('formData = ' + formData);

                let localJwt = localStorage.getItem('localJwt');
                this.axios
                    .create({
                      'headers': {
                        'Authorization': localJwt
                      }
                    }).post(url, formData).then((response) => {
                  let jsonResult = response.data;
                  if (jsonResult.state == 20000) {
                    this.$message({
                      message: '添加订单成功！',
                      type: 'success'
                    });
                    this.resetForm(formName);
                  } else {
                    this.$alert(jsonResult.message, '错误', {
                      confirmButtonText: '确定',
                      callback: action => {
                      }
                    });
                  }
                });
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          loadCategoriesTree() {
            let url = 'http://localhost:9080/categories/tree';
            console.log('url = ' + url);

            let localJwt = localStorage.getItem('localJwt');
            this.axios
                .create({
                  'headers': {
                    'Authorization': localJwt
                  }
                }).get(url).then((response) => {
              let jsonResult = response.data;
              if (jsonResult.state == 20000) {
                this.categoryOptions = jsonResult.data;
              } else {
                this.$alert(jsonResult.message, '错误', {
                  confirmButtonText: '确定',
                  callback: action => {
                  }
                });
              }
            });
          },
          loadSpuListByCategoryId(categoryId) {
            if (categoryId) {
              // categoryId.forEach(item=> {
              //   this.ICategoryId=item.categoryId.length-1
              //       })
              this.ICategoryId=categoryId[categoryId.length-1]
              let url = 'http://localhost:9080/spu/listByCategoryId?categoryId=' + this.ICategoryId;
              console.log('url = ' + url);

              let localJwt = localStorage.getItem('localJwt');
              this.axios
                  .create({
                    'headers': {
                      'Authorization': localJwt
                    }
                  })
                  .get(url).then((response) => {
                let jsonResult = response.data;
                if (jsonResult.state == 20000) {
                  this.SPUList = jsonResult.data.list;
                } else {
                  this.$alert(jsonResult.message, '警告', {
                    confirmButtonText: '确定',
                    callback: action => {
                      //this.$router.push('/sys-admin/product/album');
                    }
                  });
                }
              });
            }
          },
          loadSkuListSpuId(spuId) {
            if (spuId) {
              console.log("*********"+spuId);
              let url = 'http://localhost:9080/sku/list-by-spu?spuId=' + spuId;
              console.log('url = ' + url);

              let localJwt = localStorage.getItem('localJwt');
              this.axios
                  .create({
                    'headers': {
                      'Authorization': localJwt
                    }
                  })
                  .get(url).then((response) => {
                let jsonResult = response.data;
                if (jsonResult.state == 20000) {
                  this.SKUList = jsonResult.data.list;
                } else {
                  this.$alert(jsonResult.message, '警告', {
                    confirmButtonText: '确定',
                    callback: action => {
                      //this.$router.push('/sys-admin/product/album');
                    }
                  });
                }
              });
            }
          },
        },
        mounted() {
            this.loadCategoriesTree();
            this.loadSpuListByCategoryId();
            this.loadSkuListSpuId();
            // this.loadLocalRuleForm();
        }
    }
</script>